<template>
	<view>
		<view class="fundt-title">
			{{i18n.Financial_management}}
		</view>
		
		<!-- <view class="fund-title" @tap.stop="jumps('fund-copy')"> -->
			<view class="fund-title">
			<image :src="bannerList.length?bannerList[0].img:''" mode="widthFix" lazy-load></image> 
		</view>
		  
		<!-- <view class="fund-live">
			<view class="fund-live-title">
				{{i18n.CurrentInvestment}}
			</view>
			<view class="fund-live-content">
				<block v-for="(item,index) in liveCurlist" :key="index">
					<view class="fund-live-content-item" :class="{'active':liveCurId===index}" @tap.stop="selectLiveCur(index)">{{item.title}}</view>
				</block>
			</view>
			<view class="fund-live-btn" @tap.stop="jumps('live')">{{i18n.enter_CurrentInvestment}}</view>
		</view> -->
		
		
		<!-- <view class="fund-regular">
			<view class="fund-regular-title">
				{{i18n.RegularInvestment}}
			</view>
			<view class="fund-regular-content">
				<block v-for="(item,index) in regularCurlist" :key="index">
					<view class="fund-regular-content-item" :class="{'active':regularCurId===index}" @tap.stop="selectRegularCur(index)">{{item.title}}</view>
				</block>
				
			</view>
			<view class="fund-regular-btn" @tap.stop="jumps('regular')">{{i18n.enter_RegularInvestment}}</view>
		</view> -->
		<view class="fund-con">
			<view class="fund-con-title">
				<view>{{i18n.Jutou}}</view>
				<text>{{i18n.Once_in_place_in_seconds}}</text>
			</view>
			<block v-for="(item,index) in regularCurlist" :key="index">
				<view class="fund-con-li">
					<view class="fund-con-li-title">
						{{item.title}}
					</view>
					<view class="fund-con-li-c">
						<view class="fund-con-li-c-item">
							<view>{{item.freeze | formatParsefloat}}</view>
							<text>{{i18n.price}}</text>
						</view>
						<view class="fund-con-li-c-item">
							<view>{{item.buy_num | formatParsefloat}}</view>
							<text>{{i18n.Number_of_coins_obtained}}</text>
						</view>
						<view class="fund-con-li-c-item">
							<view hover-class="active" @tap.stop="toBUy(item)">{{i18n.Subscribe}}</view>
							<!-- <text>剩余30000</text> -->
						</view>
					</view>
					<view class="fund-con-li-co">
						{{item.content}}
					</view>
				</view>
			</block>
		</view>
		<load v-if="showLoad"></load>
		
		<view class="popule" v-if="popule_true" @tap.stop="popule_true=!popule_true">
			<view class="popule-content" @tap.stop="''">
				<view class="popule-cont">
					<view class="popule-close" @tap.stop="popule_true=!popule_true">
						<i class="icon iconfont icon-cha"></i>
					</view>
					
					<view class="poule-container">
						<view class="poule-container-title">
							{{info.title}}
						</view>
						<view class="popule-ti">
							<text>{{i18n.price}}</text>
							<view>{{info.freeze | formatParsefloat}}</view>
						</view>
<!-- 						<view class="popule-ti">
							<text>介绍</text>
							<view>{{info.content}}</view>
						</view> -->
						<view class="popule-ti">
							<text>{{i18n.buy_number}}</text>
							<input type="text" :placeholder="i18n.p_enter_buy_num" v-model="num" class="input-i-li">
						</view>
						<view class="popule-ti">
							<text>{{i18n.select_cur}}</text>
							<picker @change="changeCur" :value="curIndex" :range="inpo">
								<!-- <block v-for="(item,index) in walletList" :key="index"> -->
									<!-- <view>{{item.title_en}}</view> -->
									
									<view class="input-item-i">
										<input type="text" :placeholder="i18n.select_cur" disabled v-model="grade">
										<i class="icon iconfont icon-arrow-right"></i>
									</view>
								<!-- </block> -->
							</picker>
							<text class="popule-ti-tips">{{i18n.Current_available_balance}}{{walletList[curIndex].balance}}</text>
						</view>
						<view class="popule-ti">
							<text>{{i18n.Available}}MPS</text>
							<view>{{realNum}} (MPS)</view>
						</view>
						<view class="popule-ti">
							<text>{{i18n.paypwds}}</text>
							<view class="pop-input-item">
								<input type="text" :password="!showPay" :placeholder="i18n.p_enter_paddword" v-model="paypwd" maxlength="6">
								<i class="icon iconfont" @tap.stop="showPay=!showPay" :class="[showPay?'icon-yanjing2':'icon-yanjing1']"></i>
							</view>
							
						</view>
						
						<view class="popule-btn-cn">
							<button type="default" @tap.stop="popule_true=!popule_true">{{i18n.cancel}}</button>
							<button type="default" :class="{'active':InComfirm}" :disabled="!InComfirm" hover-class="act" class="popule-btn" @tap.stop="comfirm">{{i18n.Subscribe}}</button>
						</view>
						
						
					</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import Toast from '@/components/toast/toast.vue';
	import Load from '@/components/common/load.vue';
	import {fetch, _updataTabBar, showToast, pageto, forceUpdate} from '@/common/js/util.js';
	import {mapGetters, mapMutations} from 'vuex' 
	export default {
		data() {
			return {
				popule_true:false,
				liveCurId:null,
				liveCurlist:[],
				regularCurId:null,
				regularCurlist:[],
				isClick:false,
				bannerList:[],
				walletList:[],
				inpo:[],
				info:{},
				curIndex:0,
				curInfo:'',
				grade:'',
				num:'',
				paypwd:'',
				InComfirm:false,
				showPay:false
			}
		},
		onShow() {
			this.walletList = []
			this.inpo = []
			this.getWallet();
			this.empty();
			this.getSHopList();
			this.popule_true = false
			this.paypwd = ''
			this.num = ''
			this.curIndex = 0
		},
		onLoad(){
			this.getLun();
		},
		computed:{
			realNum(){
				if(this.num){
					return this.num*this.info.buy_num
				}else{
					return '0'
				}
			},
			formatParsefloat(val){
				if ((!val && val != 0) || val == null || val == undefined || val == 'undefined') {
					return 0
				}
				return parseFloat(val)
			},
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getTextArr',
				'getLangType',
				'getLang'
			])
		},
		components:{
			Toast,Load
		},
		watch:{
			num(val){
				this.change()
			},
			grade(val){
				this.change()
			},
			paypwd(val){
				this.change()
			}
		},
		methods:{
			change(){
				if(this.num&&this.grade&&this.paypwd){
					this.InComfirm = true;
					return
				}
				this.InComfirm = false
			},
			comfirm(){
				let op = {
					id: this.getLoginInfo.id,
					token: this.getLoginInfo.token,
					lang_type: this.getLang=='en'?2:1,
					paypwd: this.paypwd,
					num:this.num,
					shopid: this.info.id,
					token_id: this.walletList[this.curIndex].id
				}
				fetch(this.getRequestUrl + '/api/shop/buy_shop',op,'post')
					.then(res=>{
						showToast(res.data.msg)
						if(res.data.code==1){
							this.getSHopList();
						}
					})
					.catch(err=>{
						
					})
			},
			changeCur(e){
				console.log(e);
				this.curIndex = e.target.value
				this.grade = this.inpo[this.curIndex]
			},
			...mapMutations(['setPackages']),
			toBUy(info){
				this.info = info
				this.popule_true =true;
			},
			getSHopList(){
				let url = this.getRequestUrl + '/api/Shop/shop_list';
				let _data = {
					id : this.getLoginInfo.id,
					token : this.getLoginInfo.token,
					type: 1
				}
				fetch(url,_data,"POST").then(res=>{
					//this.getSHopList2();
					if(res.data.code){
						// this.liveCurlist = res.data.data;
						this.regularCurlist = res.data.data;
						this.regularCurlist.forEach((item,index)=>{
							this.regularCurlist[index].percentage = (((parseInt((item.max/item.buy_num)*10000))/10000)*100).toFixed(2)
						})
					}
				})
			},
			getWallet(){
				let op = {
					id : this.getLoginInfo.id,
					token : this.getLoginInfo.token
				}
			fetch(this.getRequestUrl+'/api/wallet/wallet_list',op,'post')
				.then(res=>{
					if(res.statusCode == 200 && res.data.code == 1){
						console.log(res);
						this.walletList = []
						this.inpo = []
						let list = res.data.data.list
						list =list.filter((item,index)=>{
							return (item.title_en!='MPS')
						})
						this.walletList =list.filter((item,index)=>{
							return (item.title_en!='BTC')
						})
						for(var i = 0; i<this.walletList.length;i++){
							this.inpo.push(this.walletList[i].title_en)
						}
						
						console.log(this.inpo);
						
						console.log(this.walletList );
					}
				})
			},
			getSHopList2(){
				let url = this.getRequestUrl + '/api/Shop/shop_list';
				let _data = {
					id : this.getLoginInfo.id,
					token : this.getLoginInfo.token
				}
				fetch(url,_data,"POST").then(res=>{
					if(res.data.code){
						// this.liveCurlist = res.data.data;
						this.liveCurlist = res.data.data;
					}
				})
			},
			selectLiveCur(num){
				if(this.liveCurId==null){
					this.liveCurId = num
				}else{
					this.liveCurId = null
				}
			},
			selectRegularCur(num){
				if(this.regularCurId==null){
					this.regularCurId = num
				}else{
					this.regularCurId = null
				}
			},
			jumpList(){
				uni.navigateTo({
					url:'/pages/fund/list'
				})
			},
			empty(){
				this.liveCurId = null;
				this.regularCurId = null;
				this.showLoad = false;
				this.isClick = false;
			},
			getLun(){
				let _url = this.getRequestUrl+'/api/user/lun';
				let result = fetch(_url);
				this.showLoad = true;
				result.then(res=>{
					this.showLoad = false;
					if(res.data.code){
						this.bannerList = res.data.data
						this.bannerList.forEach((item,index)=>{
							this.bannerList[index].img = this.getRequestUrl+'/uploads/'+item.img
						})
					}
				}).catch(err=>{ 
					this.showLoad = false;
				})
			},
			jumps(val){
				switch (val) {
					case 'regular':
						if(this.regularCurId !=null){
							let item = this.regularCurlist[this.regularCurId]
							item = JSON.stringify(item)
							this.setPackages(item)
							uni.navigateTo({
								url:`/pages/fund/fund-live-detail`
							})
						}else{
							pageto('/pages/fund/fund-regular')
						}
						break;
					case 'live':
						if(this.liveCurId !=null){
							let items = this.liveCurlist[this.liveCurId]
							items = JSON.stringify(items)
							this.setPackages(items)
							uni.navigateTo({
								url:`/pages/fund/fund-live-list`
							})
						}else{
							pageto('/pages/fund/fund-live')
						}
						break;
					case 'fund-copy':
						pageto('/pages/fund/fund-copy')
						break;
				}
			}
		}
	}
	
</script>
<style>
	page{
		background-color: #f0f0f0;
	}
</style>
<style lang="scss" scoped>
	.popule{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,.4);
		z-index: 10;
		.popule-content{
			position: fixed;
			width: 750upx;
			left: 0;
			bottom: 0;
			background-color: #FFFFFF;
			border-top-left-radius: 10upx;
			border-top-right-radius: 10upx;
			.popule-cont{
				position: relative;
				padding: 40upx 30upx 20upx;
				.popule-close{
					position: absolute;
					right: 40upx;
					top: 30upx;
					color: #636363;
					font-size: 30upx;
				}
				.poule-container{
					.poule-container-title{
						line-height: 88upx;
						border-bottom: 1upx solid #D2D2D2;
						color: #686868;
						font-size: 26upx;
					}
					.popule-btn-cn{
						display: flex;
						justify-content: space-between;
						align-items: center;
						button{
							&:first-of-type{
								margin-right: 20upx;
							}
							flex: 1;
							margin:20upx auto;
							line-height: 80upx;
							font-size:26upx;
							text-align: center;
							border-radius:10upx;
							color: #333333;
							background-color: #ececee;
							&:last-of-type{
								border-color: #1D7DFF;
								color: #1D7DFF;
								&::after{
									border-color: #1D7DFF;
								}
							}
							&.active{
								background-color: #1D7DFF;
								color: #FFFFFF;
							}
							&.act{
								opacity: .95;
								transform: scale(.95);
							}
						}
					}
					
					.popule-ti{
						padding: 15upx 15upx;
						border-bottom: 1upx solid #D2D2D2;
						&:last-of-type{
							border-bottom: none;
						}
						.pop-input-item{
							margin: 15upx 0;
							display: flex;
							justify-content: space-between;
							align-items: center;
							background-color: #F6F6F8;
							border-radius: 10upx;
							padding: 0 20upx;
							i{
								width: 80upx;
								text-align: center;
								line-height: 90upx;
							}
							input{
								flex: 1;
								line-height: 90upx;
								height: 90upx;
							}
						}
						.popule-ti-tips{
							margin: 15upx 0;
						}
						text{
							line-height: 30upx;
							color: #636363;
							display: block;
							font-size: 22upx;
						}
						view{
							line-height: 88upx;
							font-size: 28upx;
							color: #232323;
						}
						.input-i-li{
							margin-top: 15upx;
							background: #f6f6f8;
							font-size: 26upx;
							line-height: 90upx;
							height: 90upx;
							background-color: #F6F6F8;
							border-radius: 10upx;
							margin-bottom: 10upx;
							padding: 0 20upx;
						}
						.input-item-i{
							margin-top: 15upx;
							background-color: #F6F6F8;
							border-radius: 10upx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 0 20upx;
							&.select-type{
								padding-top: 50upx;
								width: 300upx;
								margin: 0 auto;
								background-color:#FFFFFF;
								text{
									color: #B7B7B9;
									font-size: 26upx;
									&.active{
										position: relative;
										color: #0F0F0F;
										font-weight: bold;
										font-size: 30upx;
										&::after{
											content: "";
											position: absolute;
											left: 50%;
											bottom: 0;
											background-color: #0F0F0F;
											width: 80upx;
											height: 10upx;
											border-radius: 5upx;
											transform: translateX(-50%);
										}
									}
								}
							}
							i{
								width: 80upx;
								text-align: center;
								line-height: 90upx;
							}
							input{
								flex: 1;
								font-size: 26upx;
								line-height: 90upx;
								height: 90upx;
							}
						}
					}
				}
			}
		}
	}
	.fundt-title{
		background-color: #1D7DFF;
		line-height: 60upx;
		padding: 40upx 30upx;
		color: #ffffff;
	}
	.index-top-nav-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		view{
			font-size:36upx;
			font-weight: bold;
		}
		text{
			font-size:28upx;
			font-weight: 100;
		}
	}
	.fund-title{
		position: relative;
		// padding-top: 20upx;
		text-align: center;
		&::before{
			height: 80upx;
			width: 100%;
			background-color: #1D7DFF;
			content: "";
			z-index: -1;
			position: absolute;
			left: 0;
			top: 0;
		}
		image{
			width: 680upx;
			height: 310upx;
			flex-shrink: 0;
		}
	}
	.fund-con{
		margin: 58upx 30upx 0;
		border-radius: 16upx;
		padding: 0 17upx 46upx;
		background-color: #FFFFFF;
		.fund-con-title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 84upx;
			border-bottom: 1upx solid #D2D2D2;
			view{
				color: #0E0E0E;
				font-size: 30upx;
				font-weight: bold;
			}
			text{
				color: #686868;
				font-size: 22upx;
			}
		}
		.fund-con-li{
			border-bottom: 1upx solid #D2D2D2;
			&:last-of-type{
				border-bottom:none;
			}
			.fund-con-li-title{
				padding: 0 30upx;
				line-height: 88upx;
				font-weight: bold;
				color: #0e0e0e;
			}
			.fund-con-li-co{
				padding: 20upx 30upx;
				background-color: #f0f0f0;
				border-radius: 10upx;
				font-size: 22upx;
				margin-bottom: 20upx;
			}
			.fund-con-li-c{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30upx 36upx;
				.fund-con-li-c-item{
					view{
						color: #232323;
						line-height: 44upx;
						margin-bottom: 8upx;
						font-size: 28upx;
					}
					text{
						color: #636363;
						font-size: 22upx;
					}
					&:first-of-type{
						view{
							color: #1D7DFF;
						}
					}
					&:last-of-type{
						view{
							width: 150upx;
							height: 66upx;
							border-radius: 33upx;
							background-color: #1D7DFF;
							text-align: center;
							color: #FFFFFF;
							line-height: 66upx;
							font-size: 22upx;
							&.active{
								transform: scale(.9);
								opacity: .9;
							}
						}
					}
				}
			}
		}
	}
	// .fund-live{
	// 	padding: 58upx 33upx 46upx;
	// 	border-bottom: 20upx solid #E1E6F0;
	// 	.fund-live-title{
	// 		font-size: 32upx;
	// 		font-weight: bold;
	// 		color: #000000;
	// 		margin-bottom: 28upx;
	// 	}
	// 	.fund-live-content{
	// 		display: flex;
	// 		flex-flow:row wrap;
	// 		align-items: center;
	// 		.fund-live-content-item{
	// 			// width:160upx;
	// 			padding: 0 15upx;
	// 			height: 60upx;
	// 			line-height: 60upx;
	// 			text-align: center;
	// 			border-radius: 8upx;
	// 			border: 2upx solid #166AFE;
	// 			color: #166AFE;
	// 			font-size:28upx;
	// 			margin-right: 14upx;
	// 			margin-bottom: 14upx;
	// 			&.active{
	// 				background-color: #166AFE;
	// 				color: #FFFFFF;
	// 			}
	// 		}
	// 	}
	// 	.fund-live-btn{
	// 		line-height: 76upx;
	// 		border-radius: 8upx;
	// 		background-color: #166AFE;
	// 		text-align: center;
	// 		color: #FFFFFF;
	// 		margin-top: 60upx;
	// 	}
	// }
	// .fund-regular{
	// 	padding: 58upx 33upx 46upx;
	// 	.fund-regular-title{
	// 		font-size: 32upx;
	// 		font-weight: bold;
	// 		color: #000000;
	// 		margin-bottom: 28upx;
	// 	}
	// 	.fund-regular-content{
	// 		display: flex;
	// 		flex-flow:row wrap;
	// 		align-items: center;
	// 		.fund-regular-content-item{
	// 			// width:160upx;
	// 			padding: 0 15upx;
	// 			height: 60upx;
	// 			line-height: 60upx;
	// 			text-align: center;
	// 			border-radius: 8upx;
	// 			border: 2upx solid #166AFE;
	// 			color: #166AFE;
	// 			font-size:28upx;
	// 			margin-right: 14upx;
	// 			margin-bottom: 14upx;
	// 			&.active{
	// 				background-color: #166AFE;
	// 				color: #FFFFFF;
	// 			}
	// 		}
	// 	}
	// 	.fund-regular-btn{
	// 		line-height: 76upx;
	// 		border-radius: 8upx;
	// 		background-color: #166AFE;
	// 		text-align: center;
	// 		color: #FFFFFF;
	// 		margin-top: 60upx;
	// 	}
	// }
</style>